<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
    <style>
        #box{
            width: 500px;
            height:280px;
            margin: 0 auto;
            border: 1px #ccc solid;
        }
        table{
            border-collapse:collapse; 
            border-spacing:0px;  	     
        }
        .head{
            width: 500px;
            height: 50px;
            line-height: 50px;
            background-color: #d1edf0;
        }
        .head>td{
            width: 108px;
            color: #728796;
            font-size: 20px;
            font-weight: bold;
        }
        .head>td:first-child{
            width: 80px;
        }
        .body>td{
        height: 35px;
        line-height: 35px;
        width: 108px;
        }
        .body>td:first-child{
            padding-left:20px ;
            width: 50px;
        }
        .body{
            height: 40px;
            line-height: 40px;
        }
        .body:nth-of-type(2n){
           background-color: #efefef;
        }
        .footer{
            margin-top: 20px;
        }
        .num{
            display: inline-block;
            width: 15px;
            text-align: center;

        }
    </style>
</head>
<body>
        <div id="box">
            <table>
                <thead>
                    <tr class="head">
                        <td></td>
                        <td>商品名称</td>
                        <td>商品单价</td>
                        <td>商品数量</td>
                        <td>操作</td>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item,index) in arr" class="body">
                        <td>{{index+1}}</td>
                        <td>{{item.name}}</td>
                        <td>{{item.price}}</td>
                        <td>
                            <button @click="sub(item)">-</button>
                            <span class="num">{{item.num}}</span>
                            <button @click="add(item)">+</button>
                        </td>
                        <td><button @click="del()">移除</button></td>
                        
                    </tr>
                </tbody>
            </table>
            <div class="footer"><td>总价：¥ <span>{{sum()}}</span></td></div>
        </div>
    <script>
        var vm=new Vue({
            el:"#box",
            data:{
                arr:[
                    {name:"iPhone X",price:"7999",num:"1"},
                    {name:"荣耀 10",price:"2399",num:"1"},
                    {name:"华为 P20",price:"3399",num:"1"},
                    {name:"小米 8",price:"3999",num:"1"}
                ],
            
                bol:"false"
            },
            methods: {
                sub(item){
                   if(item.num>0){
                    item.num--;
                   }else{
                       alert("不能再减了，没有啦！");
                   }
                },
                add(item){
                    if(item.num<=9){
                        item.num++;
                    }else{
                        alert("不能再加了，限量了")
                    }
                },
                sum(){
                    let temp=0;
                    for(var i=0;i<this.arr.length;i++){
                       temp+= this.arr[i].price*this.arr[i].num
                    }
                    return temp;
                 },
                 del(index){
                    this.arr.splice(index,1)
                  }
            }
        })
    </script>
</body>
</html>